

// 小试牛刀  HOOKS 实现简易的留言板 
import {useState,useRef} from "react"
export function HooksTwo(){
  const text = useRef()
  const [list,setList] = useState([
      {
        title:"Vue is so easy"
      },
      {
        title:"node is so 困难?"
      },
      {
        title:"React is so 折磨人 "
      },
      {
        title:"小程序到底简单吗..."
      }
  ])

  const addLiuYan = ()=>{
     var value  = text.current.value;
    //  list.push({
    //    title:value
    //  })
    // setList(list)
     setList([...list,{title:value}])
     text.current.value = ""
  }

  const deleteOne = (l,i)=>{
      list.splice(i,1)
      setList([...list])
  }

  const updateOne = (l,i)=>{
      var title = window.prompt(i,l.title)
      if(title && title !=l.title){
        list.splice(i,1,{title:title})
        setList([...list])
      }
  }

  return (
    <div>
      <h2>HOOKS 实现简易的留言板   </h2>
      <div>
         <h3>显示留言 </h3>
         <div>
            {
              list.map((l,i)=>(
                <div key={i} style={{width:"60%",padding:10,marginTop:20,border:'1px solid #999',borderRadius:10}}>
                  <p style={{padding:6}}>序号: {i+1}</p>
                  <p style={{padding:6}}>标题: {l.title }</p>
                  <p style={{padding:6}}>
                    <button onClick={()=>deleteOne(l,i)}>删除</button> 
                    <button onClick={()=>updateOne(l,i)}> 修改 </button>
                  </p>
                </div>
              ))
            }
         </div>
      </div>
      <div style={{width:"60%",padding:10,marginTop:20,border:'1px solid #123456',borderRadius:10}}>
        <h2  style={{padding:6}}>添加留言</h2>
        <div  style={{padding:6}}>
          <input type="text" ref={text}   placeholder="请输入" />
        </div>
        <button onClick={addLiuYan}>提交数据 </button>
      </div>
    </div>
  )
}